<template>
  <uni-list :border="false" class="order-list">
    <uni-list-item  clickable @click="gotoDetail(item)" v-for="item,index in list" :key="index">
      <template v-slot:body>
        <view class="left">
          <image class="img" :src="item.coverImgUrl" mode=""></image>
          <view class="msg-content">
            <view class="title">
              {{item.name}}
            </view>
            <view class="info">
              {{item.trackCount}}首，by {{item.creator.nickname}},播放{{numberFormat(item.playCount)}}次
            </view>
          </view>
        </view>
      </template>
      <template v-slot:footer>
      </template>
    </uni-list-item>
  </uni-list>
    <uni-load-more v-if="list.length" :status="status"></uni-load-more>
</template>
<script setup>
  import { numberFormat } from '@/utils/index.js'
  import {
    ref
  } from "vue";
  const props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
    status: {
      type: String,
      default: 'more'
    },
    key:{
      type: String,
      default: ''
    }
  })
  const gotoDetail = (item)=>{
    uni.navigateTo({
      url:'/pages/song-detail/song-detail?id='+item.id
    })
  }
</script>
<style lang="less">
  .order-list{
    .left{
      display: flex;
      align-items: center;
      .img{
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
      }
      .msg-content{
        width: 530rpx;
        .title{
          font-size: 32rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          // line-height: 60rpx;
          margin-bottom: 20rpx;
        }
        .info{
          font-size: 24rpx;
          color: #757575;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .is-include{
          
        }
      }
    }
    .right{
      
    }
  }
</style>
